<template>
  <a-drawer
    title="导入数据"
    placement="right"
    :closable="true"
    :maskClosable="true"
    @close="onDrawerClose"
    :visible="visible"
    :width="400"
    :getContainer="false"
  >
    <div class="allDiv">
      <div class="buttons">
        <a-upload
          name="file"
          :multiple="false"
          :showUploadList="false"
          :action="$rootUrl + leading"
          :headers="headers"
          @change="handleChange"
          style="display: inline-block"
          accept=".xlsx,.xls"
          class="upload-list-inline"
          :before-upload="beforeUploadcl"
        >
          <a-button type="primary">
            <a-icon type="upload" />
            上传Excel数据
          </a-button>
        </a-upload>
        <a-button style="float: right" type="primary" icon="login" @click="ImportData()">导入数据</a-button>
      </div>
      <hr />
      <div class="titlePreview">
        <span>Excel数据预览</span>
      </div>
      <div class="tables">
        <a-table
          ref="table"
          :columns="columns"
          :dataSource="tableData"
          :pagination="pagination"
          :loading="loading"
          :bordered="true"
          align="center"
          :scroll="{ x: 1000 }"
          size="middle "
        >
        </a-table>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import Token from '../../utils/cache/TokenCache'
import xlsx from 'xlsx'

const columns = [
  { title: '序号', dataIndex: 'Sort', width: '10%' },
  { title: '电梯品牌', dataIndex: 'E_Brand', width: '10%' },
  { title: '电梯系列', dataIndex: 'E_Series', width: '10%' },
  { title: '机房类型', dataIndex: 'E_RoomType', width: '10%' },
  { title: '对重类型', dataIndex: 'E_CounterWeight', width: '10%' },
  { title: '电梯类型', dataIndex: 'E_Type', width: '10%' },
  { title: '载重(kg)', dataIndex: 'E_Load', width: '10%' },
  { title: '梯速(m/s)', dataIndex: 'E_Speed', width: '10%' },
  { title: '同款编号', dataIndex: 'E_SameCode', width: '10%' },
  { title: '同款数量', dataIndex: 'E_SameAmount', width: '10%' },
  { title: '轿厢类型', dataIndex: 'E_LiftCarType', width: '10%' },
  { title: '载重人数', dataIndex: 'E_LoadNum', width: '10%' },
  { title: '最大停站数', dataIndex: 'E_MaxStop', width: '10%' },
  { title: '最大提升高度', dataIndex: 'E_MaxLiftHeight', width: '10%' },
  {
    title: '井道尺寸(mm)',
    children: [
      { title: '宽度(HW)', dataIndex: 'E_ShaftWidth', width: '10%' },
      { title: '深度(HD)', dataIndex: 'E_ShaftDepth', width: '10%' },
      { title: '备注', dataIndex: 'E_ShaftRemark', width: '10%' }
    ]
  },
  {
    title: '机房尺寸(mm)',
    children: [
      { title: '宽度(MW)', dataIndex: 'E_MRWidth', width: '10%' },
      { title: '深度(MD)', dataIndex: 'E_MRDepth', width: '10%' },
      { title: '净高(MH)', dataIndex: 'E_MRNetHeight', width: '10%' },
      { title: '备注', dataIndex: 'E_MRRemark', width: '10%' }
    ]
  },
  {
    title: '轿厢尺寸(mm)',
    children: [
      { title: '宽度(CW)', dataIndex: 'E_LiftCarWidth', width: '10%' },
      { title: '深度(CD)', dataIndex: 'E_LiftCarDepth', width: '10%' },
      { title: '净高(CH)', dataIndex: 'E_LiftCarNetHeight', width: '10%' }
    ]
  },
  {
    title: '顶层高度(mm)',
    children: [
      { title: 'OH', dataIndex: 'E_TopHeight', width: '10%' },
      { title: '备注', dataIndex: 'E_TopHeightRemark', width: '10%' }
    ]
  },
  {
    title: '底坑深度(mm)',
    children: [
      { title: 'PD', dataIndex: 'E_BottomDepth', width: '10%' },
      { title: '备注', dataIndex: 'E_BottomDepthRemark', width: '10%' }
    ]
  },
  { title: '开门方式', dataIndex: 'E_OpenDoorMode', width: '10%' },
  {
    title: '轿厢门',
    children: [
      { title: '宽度', dataIndex: 'E_LiftCarDoorW', width: '10%' },
      { title: '高度', dataIndex: 'E_LiftCarDoorH', width: '10%' }
    ]
  },
  {
    title: '结构门',
    children: [
      { title: '宽度', dataIndex: 'E_StructuralDoorW', width: '10%' },
      { title: '高度', dataIndex: 'E_StructuralDoorH', width: '10%' }
    ]
  },
  { title: '电梯备注', dataIndex: 'Remark', width: '10%' }
]
export default {
  components: {
    Token,
    xlsx
  },
  props: {
    parentObj: Object,
    leading: { type: String, required: false },
    templet: { type: String, required: false }
  },
  data () {
    return {
      layout: {
        labelCol: { span: 10 },
        wrapperCol: { span: 12 }
      },
      clAction: this.$rootUrl + this.leading, // 后台上传地址
      columns: columns, // table头
      tableData: [], // table内容
      visible: false,
      loading: false,
      title: '',
      headers: {
        authorization: 'Bearer ' + Token.getToken()
      }
    }
  },
  methods: {
    init () {
      this.visible = true
    },
    openDrawer () {
      this.init()
    },
    onDrawerClose () {
      this.visible = false
    },
    beforeUploadcl (file) {
      // 上传之前回调，判断上传类型
      const isJpgOrPng = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isJpgOrPng) {
        this.$message.error('请选择xlsx类型文件')
        this.fileListcl = []
      }
      return isJpgOrPng
    },
    ImportData () {
      var thisObj = this
      thisObj.$message.info('导入功能暂未开通!')
    },
    handleChange (info) {
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        if (info.file.response.Success === false) {
          this.$message.error(`${info.file.name}文件,${info.file.response.Msg},请检查文件内容！ `)
        } else {
          this.parentObj.getDataList()
          this.$message.success(`${info.file.name}  文件上传成功！`)
        }
        this.visible = false
      } else if (info.file.status === 'error') {
        alert(this.Token.authorization)
        this.$message.error(`${info.file.name} 文件上传失败！`)
      }
    }
  }
}
</script>
<style scoped>
.allDiv {
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 15px;
  /*background-color: #d1e9ff;*/
}

.buttons {
  margin: 10px auto;
}

.buttons a-upload {
  display: inline-block;
}

.tables {
  visibility: hidden;
}

.titlePreview {
  visibility: hidden;
  font: italic bolder 30px/60px Georgia, serif;
  text-align: center;
}
/* tile uploaded pictures */
.upload-list-inline >>> .ant-upload-list-item {
  float: right;
  width: 100%;
  margin-right: 8px;
}

.upload-list-inline >>> .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}

.upload-list-inline >>> .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
</style>
